<template>
  <div class="bg_f4 loginwrapper">
    <div class="flexcenter full_w loginbody">
      <div class="loginleft bg_fff login_r">
        <div class="login_title c_000">登录锐行互联账号</div>
        <el-tabs
          v-model="activeName"
          stretch
          @tab-click="handleClick"
          class="logintabs"
        >
          <el-tab-pane label="账号登录" name="first">
            <el-form
              :model="loginform"
              :rules="rules"
              ref="loginform"
              class="loginform"
            >
              <el-form-item label="" prop="username">
                <el-input
                  size="large"
                  v-model="loginform.username"
                  auto-complete="off"
                  placeholder="请输入用户名"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="mobile"
                    class="el-input__icon input-icon"
                  />
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  size="large"
                  v-model="loginform.password"
                  type="password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  show-password
                  @keyup.enter.native="handleLogin(1)"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="psd"
                    class="el-input__icon input-icon"
                  />
                </el-input>
              </el-form-item>
              <!-- <el-checkbox
                v-model="loginform.rememberMe"
                style="margin: 0px 0px 25px 0px"
                >记住密码</el-checkbox
              > -->
              <el-form-item label="" prop="rememberMe">
                <el-checkbox
                  class="f-12 flex aligncenter checkboxinfo"
                  v-model="loginform.rememberMe"
                >
                  我已阅读并同意<span class="c_primary" @click="openwindow"
                    >《锐行互联服务协议》</span
                  >
                </el-checkbox>
              </el-form-item>
              <el-form-item style="width: 100%">
                <el-button
                  :loading="loading"
                  size="large"
                  type="primary"
                  style="width: 100%"
                  @click.native.prevent="handleLogin(1)"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
                <!-- <div class="flexrowbetween">
                  <div>
                    没有账号？
                    <span class="c_primary commhover" @click="goPage('/register')">立即注册</span>
                  </div>
                  <div class="c_primary commhover" @click="goPage('/register')">立即注册</div>
                  <div class="c_primary commhover" @click="goPage('/rebackpwd')">忘记密码</div>
                </div> -->
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="验证码登录" name="second">
            <el-form
              :model="phoneform"
              :rules="phonerules"
              ref="phoneform"
              class="loginform"
            >
              <el-form-item label="" prop="phone">
                <el-input
                  v-model="phoneform.phone"
                  auto-complete="off"
                  placeholder="请输入手机号码"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="mobile"
                    class="el-input__icon input-icon"
                  />
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="code" class="codeiput">
                <el-input
                  v-model="phoneform.code"
                  auto-complete="off"
                  placeholder="请输入短信验证码"
                  @keyup.enter.native="handleLogin(2)"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="yzcode"
                    class="el-input__icon input-icon"
                  />
                </el-input>
                <span class="codebox">
                  <span class="codeline"></span>
                  <span
                    class="c_primary commhover"
                    v-if="code == '获取验证码'"
                    @click="gain"
                  >
                    {{ code }}</span
                  >
                  <span v-else class="c_primary commhover">{{ code }}</span>
                </span>
              </el-form-item>
              <el-form-item label="" prop="rememberMe">
                <el-checkbox
                  class="f-12 flex aligncenter checkboxinfo"
                  v-model="phoneform.rememberMe"
                >
                  我已阅读并同意<span class="c_primary" @click="openwindow"
                    >《锐行互联服务协议》</span
                  >
                </el-checkbox>
              </el-form-item>
              <el-form-item style="width: 100%">
                <el-button
                  :loading="loading"
                  size="large"
                  type="primary"
                  style="width: 100%"
                  @click.native.prevent="handleLogin(2)"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
                <!-- <div class="flexrowbetween">
                  <div>
                    没有账号？
                    <span class="c_primary commhover" @click="goPage('/register')">立即注册</span>
                  </div>
                  <div class="c_primary commhover" @click="goPage('/register')">立即注册</div>
                  <div class="c_primary commhover" @click="goPage('/rebackpwd')">忘记密码</div>
                </div> -->
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>   

<script>
import { LoginNavbar } from "@/layout/components";
import Cookies from "js-cookie";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { sendCodeLogin } from "@/api/login";
import { validPhone } from "@/utils/validate";
// import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请阅读相关协议后勾选已阅读同意"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      loginform: {
        username: "",
        password: "",
        rememberMe: false,
      },
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        rememberMe: [{ validator: validatePass, trigger: "blur" }],
      },
      phoneform: {
        phone: "",
        code: "",
        rememberMe: false,
      },
      phonerules: {
        phone: [{ required: true, trigger: "blur", validator: validPhone }],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
        rememberMe: [{ validator: validatePass, trigger: "blur" }],
      },
      loading: false,
      code: "获取验证码",
      isLoading:false
    };
  },
  components: {
    LoginNavbar,
  },
  created() {
    // //如果头部带token，直接进入首页
    console.log("进来登录页了");
    let query = this.$route.query;
    if (query.token) {
      console.log(
        "---带token了---",
        this.$route.query.token,
        this.$route.query.admin_id
      );
      setToken(this.$route.query.token);
      localStorage.setItem("admin_id", query.admin_id);
      this.$store.dispatch("GetInfo").then(() => {
        if (query.activeId) {
          this.$router.push({
            name: "CreateTemp",
            query: { id: query.activeId },
          });
        } else {
          this.$router.push("/");
        }
      });
    } else {
      localStorage.setItem("admin_id", "");
    }
  },
  mounted() {},
  methods: {
    handleClick() {},

    register() {},

    // links() {},
    // enter1(e) {},
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },

    //获取验证码
    gain() {
      // 防止重复点击
      if(this.isLoading) return
      this.isLoading=true;
      this.codeEvent(this.phoneform.phone);
      setTimeout(()=>{
        this.isLoading=false;
      },1000)
    },
    //封装验证码的函数
    codeEvent(iphone) {
      console.log(iphone);
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "warning",
          offset: 150,
        });
      } else {
        sendCodeLogin({
          phone: iphone,
        }).then(() => {
          this.countDown(60);
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },

    handleLogin(type) {
      if (type == 1) {
        this.$refs.loginform.validate((valid) => {
          if (!valid) return;
          this.loading = true;
          // if (this.loginform.rememberMe) {
          //   Cookies.set("username", this.loginform.username, { expires: 30 });
          //   Cookies.set("password", encrypt(this.loginform.password), { expires: 30 });
          //   Cookies.set('rememberMe', this.loginform.rememberMe, { expires: 30 });
          // } else {
          //   Cookies.remove("username");
          //   Cookies.remove("password");
          //   Cookies.remove('rememberMe');
          // }
          this.$store
            .dispatch("Login", this.loginform)
            .then(() => {
              this.$router.push({ path: "/" }).catch(() => {});
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        });
      } else {
        this.$refs.phoneform.validate((valid) => {
          if (!valid) return;
          this.loading = true;
          this.$store
            .dispatch("PhoneLogin", this.phoneform)
            .then(() => {
              this.$router.push({ path: "/" }).catch(() => {});
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        });
      }
    },

    goPage(page) {
      this.$router.push({ path: page });
    },

    openwindow() {
      window.open(this.userdomain + "agreement");
    },
  },
};
</script>

<style lang="scss" scoped>
.loginwrapper {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/bg.jpg") no-repeat;
  background-size: cover;
  // background-size: contain;
}
.loginleft {
  width: 462px;
  // height: 500px;
  box-shadow: 12px 12px 12px 1px rgba(189, 205, 227, 0.62);
  position: relative;
  .login_title {
    font-size: 32px;
    margin-bottom: 36px;
    font-weight: 500;
    text-align: center;
  }
  .leftcontent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 80px 50px 30px;
  }
  .loginside {
    width: 100%;
    height: 100%;
  }
}
.loginbody {
  width: 100%;
  height: 100vh;
  justify-content: flex-end;
  padding-right: 12%;
}
.login_r {
  // border-radius: 8px;
  // border-bottom-right-radius: 8px;
  padding: 40px 0 32px;
}
.loginform {
  padding-top: 20px;
  width: 80%;
  margin: auto;
  ::v-deep .el-input__inner {
    border-color: #edf0f4;
    height: 46px;
    line-height: 46px;
  }
  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 45px;
  }
  ::v-deep .el-input__prefix {
    left: 20px;
  }
  ::v-deep .svg-icon {
    width: 16px;
    height: 100%;
    color: #000;
    // height: 18px;
  }
  ::v-deep .el-checkbox__label {
    white-space: normal;
  }
  ::v-deep .el-checkbox {
    .el-checkbox__input {
      vertical-align: top;
      padding-top: 4px;
    }
  }
}
.el-form-item {
  margin-bottom: 28px;
}
.el-button {
  border-radius: 0;
}
.codeiput {
  position: relative;
  ::v-deep .el-input__inner {
    padding-right: 100px;
  }
}
.codebox {
  position: absolute;
  right: 10px;
  height: 46px;
  line-height: 46px;
  top: 0;
  display: flex;
  align-items: center;
}
.zcbtn {
  height: 37px;
  width: 200px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  margin: auto;
}
.codeline {
  display: inline-block;
  height: 27px;
  width: 1px;
  background-color: #edf0f4;
  margin-right: 8px;
}
</style>
<style lang="scss">
.logintabs {
  .el-tabs__active-bar {
    left: 10%;
    width: 80px !important;
    height: 3px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #edf0f4;
  }
  .el-tabs__item.is-top:nth-child(2) {
    padding-left: 50px;
    padding-right: 0;
  }
  .el-tabs__item.is-top:last-child {
    padding-right: 50px;
  }
  .el-tabs__item {
    font-size: 18px;
    font-weight: 500;
    color: #000;
  }
}
.checkboxinfo {
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .el-checkbox__label {
    margin-top: 3px;
  }
}
</style>